<template>
    <div style="max-width: 30rem; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div style="margin: 1.5rem 0.5rem 0.5rem 0.5rem;">
            <div style="display: inline-block; height: 100vh;">
                <van-sidebar v-model="active" style="width: 8rem;">
                    <van-sidebar-item v-for="(item, index) in firstCategoryData" :key="index" :title="item.title" style="font-size: 1rem;" @click="forSecondData(item.id)"/>
                </van-sidebar>            
            </div>
            <div style="display: inline-block; position: fixed; top: 4.5srem; margin-left: 0.5rem;">
                <div style="margin: auto 0.5rem; display: inline-block;" @click="() => router.push({path: '/m/productList', query: {'id': item.id, 'title': item.title}})" v-for="(item, index) in secondCagoryData" :key="index">
                    <van-image
                        round
                        width="50"
                        height="50"
                        :src="item.img"
                    />
                    <span style="display: block;">
                        {{ item.title }}
                    </span>
                </div>
            </div>            
        </div>
    </div>
    <BtyTabBar/>
</template>

<script setup>  

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { firstCategory, secondCategory } from '@/requests/index'


import BtyTabBar from '@/components/BtyTabBar.vue';
const router = useRouter();
const active = ref(0);
const search = ref();


// 获取一级分类列表
const firstCategoryData = ref({});
const getFirstCategory = async () => {
  const res = await firstCategory();
  if (res.status === 2000) {
    firstCategoryData.value = res.data;
    forSecondData(res.data[0].id);
  } else {
    console.log("获取一级分类列表失败")
  }
};
getFirstCategory();

// 获取二级分类
const secondCagoryData = ref();
const forSecondData = async(id)=>{
    const res = await secondCategory({"id": id});
    if (res.status === 2000) {
        secondCagoryData.value = res.data;
  } else {
        console.log("获取二级分类列表失败")
  };
};

</script>